<template>
  <div>
    <template v-for="(item, index) in props.menuData" :key="`${props.index}-${item.meta.id}`">
      <!-- 菜单项 -->
      <el-menu-item 
        v-if="!item.children || item.children.length === 0" 
        :index="`${props.index}-${item.meta.id}`"
        @click="handelClick(item, `${props.index}-${item.meta.id}`)"
      >
        <el-icon size="20">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <!-- 根据 isCollapse 控制文字内容的显示与隐藏 -->
        <span v-if="!props.isCollapse">{{ item.meta.name }}</span>
      </el-menu-item>

      <!-- 子菜单 -->
      <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
        <template #title>
          <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <!-- 根据 isCollapse 控制文字内容的显示与隐藏 -->
          <span v-if="!props.isCollapse">{{ item.meta.name }}</span>
        </template>

        <!-- 递归调用 TreeMenu 组件 -->
        <tree-menu 
          :index="`${props.index}-${item.meta.id}`" 
          :menuData="item.children" 
          :isCollapse="props.isCollapse"
        />
      </el-sub-menu>
    </template>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {useStore} from 'vuex'

// 接收 props
const props = defineProps({
  menuData: Array,
  index: [String, Number],
  isCollapse: Boolean, // 接收 isCollapse
})

// 路由跳转
const router = useRouter()
const store=useStore()

const handelClick = (item, active) => {
 
  router.push(item.meta.path)
  store.commit('addMenu',item.meta)
  // console.log(payload)
  // console.log(store.state.menu.selectMenu); // 打印 selectMenu
}
</script>

<style scoped>
</style>